// # 导入模块
const gulp = require('gulp')   
const fs = require('fs')
const uglify = require('gulp-uglify')     // 压缩JS、打包JS
const babel = require('gulp-babel')       // es6转es5
const rev = require('gulp-rev')           // 自动生成随机文件名
const revCollector = require('gulp-rev-collector') // 替换HTML中的名字
const clean = require('gulp-clean')       // 清除目录
const mincss = require('gulp-minify-css') // 压缩CSS
const imagemin = require('gulp-imagemin') // 压缩IMG @7.1.0
const minifyHtml = require('gulp-minify-html') // 压缩HTML

// # 定义【html】任务
gulp.task('html', (over) => {
    gulp
    // .src('./src/*.html')
    // .src(['存放json文件的目录', 'HTML文件所在目录'])
    .src(['temp/**/*.json', 'src/*.html'])
    .pipe( revCollector({
        replaceReved: true,
        dirReplacements: {
            // src路径: dist路径
            './js': './js',
            './css': './css',
        }
    }) )
    .pipe( minifyHtml() )
    .pipe( gulp.dest('./dist/') )

    // 处理下一个任务
    .on('data', () => {})
    .on('end', () => over())
})

// # 定义【imgs】任务
gulp.task('imgs', (over) => {
    gulp
    .src('./src/imgs/*.*')
    .pipe( imagemin() )
    .pipe( gulp.dest('./dist/imgs/') )

    // 处理下一个任务
    .on('data', () => {})
    .on('end', () => over())
})

// # 定义【css】任务
gulp.task('css', (over) => {
    gulp
    .src('./src/css/*.css') 
    .pipe( mincss() )
    .pipe( rev() )
    .pipe( gulp.dest('./dist/css/') )
    // 作用：保存随机的名字
    // 目的：后期打包压缩HTML名字替换
    .pipe(rev.manifest())
    .pipe( gulp.dest('temp/css/') )

    // 处理下一个任务
    .on('data', () => {})
    .on('end', () => over())
})

// # 定义【clean】任务
gulp.task('clean', (over) => {
    if (fs.existsSync('./dist')) 
    {
        gulp
        .src(['./dist','./temp'])
        .pipe(clean())
        .on('data', () => {})
        .on('end', () => over())
    } else {
        over()
    }
})

// # 定义【js】任务
// 留心1：其实可以直接打开美团项目通过JQ请求接口完成项目开发，但是为了上线加快用户访问速度，因此咱们现在为后面开发做一个准备工作  准备一个开发环境
// 留心2：管理中数据处理的模块仅仅开发使用，所以用-D
// 留心3：针对于gulp-rev模块，重复执行打包js任务会检测文件是否修改 修改了就会生成一个新的随机名
gulp.task('js', (over) => {
    // 1 读取数据
    // 2 过滤数据
    // 3 写入dist目录下
    gulp
    .src('./src/js/*.js')
    .pipe( babel({"presets": ["env"]}) )
    .pipe( uglify() )
    .pipe( rev() )
    .pipe( gulp.dest('./dist/js/') )
    // 作用：保存随机的名字
    // 目的：后期打包压缩HTML名字替换
    .pipe(rev.manifest())
    .pipe( gulp.dest('temp/js/') )

    // 处理下一个任务
    .on('data', () => {})
    .on('end', () => over())
})


// ==============================
// ==============================

// # 定义【开发服务器】任务
const server = require('browser-sync').create();
const watch = require('gulp-watch');  
const {createProxyMiddleware} = require('http-proxy-middleware') 
gulp.task('serve', () => { 
    // 特性：让你通过浏览器访问指定目录下所有内容
    server.init({
        // server: './src',
        server: {
            baseDir: './src',
            middleware: [
                // ...
                createProxyMiddleware('/api', { 
                    // 目标服务器网址
                    target: "http://kg.zhaodashen.cn/mt/web",
                    changeOrigin: true, // 是否允许跨域
                    secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                    pathRewrite: {      // 重写路径请求
                        '/api' : ''
                    },
                })
            ]
        },
        port: 80
    })

    // 监控文件修改
    watch('src/*.html', function() {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/css/*.css', function() {
        console.log('你修改CSS文件了')
        server.reload()
    }) 
    watch('src/js/*.js', function() {
        console.log('你修改JS文件了')
        server.reload()
    })
})

// # 定义【打包任务】任务
gulp.task('build', gulp.series('clean', 'js', 'css', 'imgs', 'html', () => {
    console.log('************************************')
    console.log('************************************')
    console.log('##打包成功，可以将dist放到服务器上##')
    console.log('************************************')
    console.log('************************************')
}))
